<template id="userInfo">
  <el-dialog :title="title" :visible="open">
    <el-form ref="inputForm" :model="inputForm" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="11">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="inputForm.userName" placeholder="请输入用户名" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="昵称" prop="nickName">
            <el-input v-model="inputForm.nickName" placeholder="请输入昵称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="手机号码" prop="phone">
            <el-input v-model="inputForm.phone" placeholder="请输入手机号码" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="inputForm.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="密码" prop="password">
            <el-input v-model="inputForm.password"
                      placeholder="请输入密码"
                      type="password"
                      show-password
            />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="inputForm.sex" placeholder="请选择性别">
              <el-option
                  v-for="sex in sexList"
                  :key="sex.value"
                  :label="sex.label"
                  :value="sex.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="角色" prop="role">
            <el-select v-model="inputForm.roleIds" placeholder="请选择角色" multiple>
              <el-option
                  v-for="role in roleList"
                  :key="role.roleId"
                  :label="role.roleName"
                  :value="role.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "UserInfo",
  props: [ 'title', 'roleList','dialogData','open'],
  data() {
    return{
      // 表单参数
      inputForm: {
        userId: null,
        userName: null,
        nickName: null,
        sex: null,
        phone: null,
        email: null,
        password: null,
        roleIds: []
      },
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          // 用户名为5-16位，以字母开头，字母、数字、下划线组成
          { pattern: /^[a-zA-Z][a-zA-Z0-9_-]{4,15}$/, message: "用户名为5-16位，以字母开头，字母、数字、下划线组成", trigger: "blur" }
        ],
        sex: [
          { required: true, message: "性别不能为空", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          // 手机号码验证
          { pattern: /^1[3-9]\d{9}$/, message: "手机号码格式错误", trigger: "blur" }
        ],
        password: [
          // 密码为8-16位，字母、数字、下划线、减号组成
          { pattern: /^[a-zA-Z0-9_-]{8,16}$/, message: "密码为8-16位，字母、数字、下划线组成", trigger: "blur" },
        ],
        email: [
          // 邮箱验证
          { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: "邮箱格式错误", trigger: "blur" }
        ],
      },
      // 性别列表
      sexList: [
        { label: "男", value: "0" },
        { label: "女", value: "1" },
      ],
      // 多选
      multiple: true,
    }
  },
  methods: {
    handleSubmit() {
      // 校验表单
      this.$refs["inputForm"].validate(valid => {
        if (valid) {
          // 提交表单
          this.$emit('submitData', { value: this.inputForm });
          // 清空表单
          this.resetForm();
        }
      });
    },
    /** 弹窗取消按钮 */
    handleClose(){
      // 清空表单
      this.resetForm();
      // 发送关闭事件
      this.$emit('closeDialog');
    },
    resetForm() {
      this.inputForm = {
        userId: null,
        userName: null,
        nickName: null,
        sex: null,
        phone: null,
        email: null,
        password: null,
        roleIds: []
      }
    }
  },
  watch: {
    dialogData(newVal) {
      this.inputForm = newVal;
    }
  }
}
</script>
